<template>
  <div>
    <v-header></v-header>
    <div class="content-wrapper">
      <awards :awards="awards"></awards>
      <v-rules :rules="rules"></v-rules>
      <programs :programs="programs"></programs>
    </div>
  </div>
</template>

<script>
  import vHeader from 'components/v-header/v-header'
  import awards from 'components/awards/awards'
  import vRules from 'components/v-rules/v-rules'
  import programs from 'components/programs/programs'
  import { getAwards, getRules, getPrograms } from 'api'
  export default {
    name: 'index',
    data() {
      return {
        awards: {},
        rules: {},
        programs: {}
      }
    },
    created() {
      this._getAwards()
      this._getRules()
      this._getPrograms()
    },
    methods: {
      _getAwards() {
  				this.awards = getAwards()
      },
      _getRules() {
          this.rules = getRules()
      },
      _getPrograms() {
        getPrograms().then((res) => {
        	let result={};
        	result.title = "参与节目"
          result.shows = res.data
          this.programs=result
        }).catch((error) => {
				})
      }
    },
    components: {
      vHeader,
      awards,
      vRules,
      programs
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../common/sass/_var.scss';
  body {
    background: $color-pink
  }
  .content-wrapper {
    padding: 0 10px;
  }
</style>
